<!--
 * @FileDescription: 该组件是提供商品列表
 * @Author: yijiamu
 * @Date: 2022-05-08 19:01:10
 * @LastEditors: yijiamu
 * @LastEditTime: 2022-05-08 19:01:10
 -->
<template>
  <section class="goods-container">
    <router-link
      :to="{path: 'shop', query:{geohash, id: item.id}}"
      v-for="item in shopListArr"
      :key="item.id"
      class="goods-item"
      >
      <img class="goods-cover" :src="imgBaseUrl+item.image_path" alt="图片">
      <div class="goods-info">
        <div class="info-left">
          <h1 class="info-title">{{ item.name }}</h1>
          <div class="begin-value">
            <span class="info-begin">起送￥{{ item.float_minimum_order_amount }}</span>
            <span class="info-value">配送费约为{{ item.float_delivery_fee }}</span>
          </div>
          <div class="score-sales">
            <span class="info-score">{{ item.rating }} 分</span>
            <span class="info-sales">月售{{ item.recent_order_num }}</span>
          </div>
        </div>

        <div class="info-right">
          <div class="info-supports">
            <span v-for="(item) in item.supports" :key="item.id" class="info-supports-icon">
              {{item.icon_name}}
            </span>
          </div>
          <div class="container">
            <div class="time-distance">
              <span class="info-time">{{ item.order_lead_time }}</span>
              <span class="info-distance">{{ item.distance }}</span>
            </div>
          </div>
        </div>
      </div>
    </router-link>
  </section>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {IShopList} from "@/api/config/responseType";
@Component({
  components: {}
})
export default class shopListCom extends Vue {
  @Prop() shopListArr !: IShopList[]; //请求得到的店铺数据
  @Prop() geohash !: string; //请求得到的店铺数据
  private imgBaseUrl:string = '//elm.cangdu.org/img/';  //图片地址
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  ul,ol,li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .router-link-active {
    text-decoration: none;
    color: black;
  }
  .goods-container {
    //margin: 0 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .shop_li {
      width: 100%;
    }
    .goods-item {
      width: 90vw;
      padding: 10px 10px 10px 16px ;
      margin: 6px 6vw;
      align-items: center;
      border-radius: 14px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-around;
      list-style: none;
      .goods-cover {
        border-radius: 2vw;
        width: 100px;
      }
      .goods-info {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 0 0 0 10px;
        justify-content: space-between;
        .info-left {
          .info-title {
            width: 144px;
            margin: 2px 0;
            font-size: medium;
            //max-width: 2vw;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .begin-value {
            color: #979797;
            margin: 2px 0;
            .info-begin {
              font-size: 13px;
            }
            .info-value {
              margin-left: 10px;
              font-size: 13px;
            }
          }
          .score-sales {
            .info-score{
              font-size: 16px;
              color: #ed6d2c;
            }
            .info-sales{
              color: #979797;
              margin-left: 4px;
              font-size: 13px;
            }
          }
        }
        .info-right {
          //max-width: 75px;
          //margin-left: 4vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          .info-supports {
            right: 5vw;
            display:flex;
            .info-supports-icon {
              font-size: small;
              margin: 0 4px;
              color: #9e9e9e;
              border-radius: 6px;
            }
          }
          .container {
            margin: 2px 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            .time-distance {
              color: #979797;
              .info-time{
                margin: 2vw 0;
                text-align: center;
                display: block;
                font-size: 13px;
              }
              .info-distance{
                margin: 2vw 0;
                text-align: center;
                display: block;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
</style>
